<template>
    <div id="forum-content" v-if="load">
        <el-row>
            <!-- content -->
            <el-col :lg="{span:16}" class="content">
                <!-- 标题 -->
                <div class="title">{{this.mainContent['title']}}</div>
                <!-- 文章信息 -->
                <div class="forum-info">
                    <div>{{this.mainContent['submitTime']}}</div>
                    <div><i class="iconfont icon-icon-test"></i>{{this.mainContent['visitNum']}}</div>
                    <div><i class="iconfont icon-qipao"></i>{{this.mainContent['recommendNum']}}</div>
                    <div class="dele-forum" v-if="isOwner" @click="deleteForum">删除此楼</div>
                </div>
                <!-- 发帖内容 -->
                <div class="forum-content">
                    <el-row>
                        <!-- 头像 -->
                        <el-col class="header-photo" :lg="{span:3}">
                            <div class="block">
                                <el-avatar :size="50" v-if="mainContent" :src="authorPhoto"></el-avatar>
                            </div>
                        </el-col>
                        <!-- 发帖内容,与评论样式一样 -->
                        <el-col :lg="{span:21}" class="comment">
                            <div class="username">{{this.mainContent['userName']}}</div>
                            <div class="comment-content" v-html="this.mainContent['content']"></div>
                            <div class="comment-time">{{this.mainContent['submitTime']}}</div>
                        </el-col>
                    </el-row>
                </div>

                <!-- 观看评论区 -->
                <div class="comment-list">
                    <!-- 一条评论 -->
                    <div class="one-comment" v-for="floor in floorList">
                        <el-row>
                            <!-- 头像 -->
                            <el-col class="header-photo" :lg="{span:3}">
                                <div class="block">
                                    <el-avatar :size="50" :src="'http://localhost:8080/img/header/'+floor['username']+'.jpg'"></el-avatar>
                                </div>
                            </el-col>
                            <!-- 评论 -->
                            <el-col :lg="{span:21}" class="comment">
                                <div class="username">{{floor['username']}}</div>
                                <div class="comment-content">{{floor['content']}}</div>
                                <div class="comment-time">{{floor['replyTime']}}</div>
                                <div class="comment-dele" v-if="isFloorOwner(floor['username'])" @click="deleteFloor(floor)">删除楼层</div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <!-- 评论区 -->
                <div class="give-comment" ref="comment">
                    <give-comment :receive-url="receiveUrl" :give-comment="giveComment" :slot-message="slotMessage" @send-success="sendSuccess"></give-comment>
                </div>
            </el-col>

            <!--  sidebar -->
            <el-col :lg="{span:6,offset:1}" :class="{'sidebar':active}" ref="sidebar">
                <recomment @change-page="requestForMessage"></recomment>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import GiveComment from '../../components/givecomment/GiveComment'
    import Recomment from '../../components/recomment/Recomment'
    export default {
        components: {
            Recomment,
            GiveComment},
        name: "forum-content",
        created(){
            this.requestForMessage();
        },
        mounted(){
            window.addEventListener('scroll',this.handleScroll,true);
            this.load = true;
        },
        destroyed: function () {
            window.removeEventListener('scroll', this.handleScroll, true);   //  离开页面清除（移除）滚轮滚动事件
        },
        data(){
            return{
                myHeaderSrc:'http://127.0.0.1:8080/img/header/'+window.localStorage['username']+'.jpg',
                forumID:'',
                mainContent:'',
                floorList:[],
                receiveUrl:'http://127.0.0.1:8080/forum/addfloor',
                giveComment:{
                    'content':'',
                    'username':'',
                    'forumID|floorIndex':''
                },
                load:false,
                slotMessage:'',
                active:true,
                floorIndex:'',//记录下一层的楼数
                isOwner:false
            }
        },
        methods:{
            forMateContent(content,basicUrl){
                content = '<p>'+content;
                let reg=new RegExp('\n','g')//g代表全部
                content = content.replace(reg,'</p><p>');
                let imgList = content.match(/\/IMG (.*?) IMG\//);
                for(let i=0;imgList!=null&&i<imgList.length;i+=2){
                    let contentInside = imgList[i];//文本内的
                    let fileName = imgList[i+1];//文件名
                    let requestUrl = 'http://127.0.0.1:8080/img/forum/'+basicUrl+'/'+fileName;//请求url
                    let htmlImg = '<img src="'+requestUrl+'" >';
                    content = content.replace(contentInside,htmlImg);
                }
                return content;
            },
            requestForMessage(){
                this.clearAll();
                //请求所需数据
                let forumID = this.forumID = this.$route.query.forumID;
                //1.请求主贴内容
                this.request({
                    url:'/forum/getcontent/'+forumID,
                }).then(res=>{
                    let content = res.data['content'];
                    let basicUrl = res.data['basicUrl'];
                    res.data['submitTime'] = res.data['submitTime'].substr(0,19);
                    content = this.forMateContent(content,basicUrl);
                    res.data['content'] = content;
                    this.mainContent = res.data;
                    if(res.data['userName'] == window.localStorage['username']){
                        this.isOwner = true;
                    }

                }).catch(err=>{
                    console.log(err);
                });
                //2.请求楼层内容
                this.request({
                    url:'/forum/getfloor/'+forumID,
                }).then(res=>{

                    for(let i=0;i<res.data.length;i++){
                        res.data[i]['replyTime'] = res.data[i]['replyTime'].substr(0,19);
                        this.floorList.push(res.data[i]);
                        this.floorIndex = res.data[i]['floorIndex'];//获取最后一层的楼层
                    }
                    this.slotMessage = forumID+'|'+(++this.floorIndex);
                }).catch(err=>{
                    console.log(err);
                });
            },
            clearAll(){
                //清除所有请求数据
                this.forumID = '';
                this.mainContent = '';
                this.floorList = [];
                this.slotMessage = '';
                this.floorIndex = '';
                this.isOwner = false;
            },
            sendSuccess(giveComment){

                // giveComment['replyTime'] = this.getTime();
                // this.floorList.push(giveComment);
                this.$router.go(0);
            },
            getTime(){
                let time =
                    new Date().getFullYear() +
                    "-" +
                    (new Date().getMonth() + 1) +
                    "-" +
                    new Date().getDate() +
                    " " +
                    new Date().getHours() +
                    ":" +
                    new Date().getMinutes();
                return time;
            },
            handleScroll() {
                let commentDistance = this.$refs['comment'].getBoundingClientRect().top;
                if(commentDistance<500)
                    this.active = false;
                else
                    this.active = true;
            },
            isFloorOwner(username){
                return username == window.localStorage['username'];
            },
            deleteForum(){
                //删除整楼
                this.request({
                    url:'http://localhost:8080/forum/deleteforum/'+this.forumID
                }).then(res=>{
                    this.$router.replace("/forum");
                }).catch(err=>{
                    console.log(err);
                })
            },
            deleteFloor(floor){
                //删除楼层
                this.request({
                    url:'http://localhost:8080/forum/delefloor/'+this.forumID+'/'+floor['floorIndex']
                }).then(res=>{
                    this.floorList = this.floorList.filter(t => t['floorIndex'] != floor['floorIndex']);
                    this.$message("删除成功!");
                }).catch(err=>{
                    console.log(err);
                })
            }
        },
        computed:{
            authorPhoto:function () {
                return 'http://localhost:8080/img/header/'+this.mainContent['userName']+'.jpg';
            }
        }
    }
</script>

<style scoped>
#forum-content{
    width: 90%;
    margin-left: 10%;
    margin-top: 40px;
}
.content{
    height: 100%;
}
.sidebar{
    height: 100%;
}
.title{
    font-size: 28px;
    font-weight: 700;
}
.forum-info{
    display: flex;
    margin-top: 10px;
    margin-bottom: 20px;
}
.forum-info div{
    color: #9b9b9b;
    font-size: 12px;
}
.forum-info div:nth-child(1){
    margin-left:70px;
}
.forum-info div:nth-child(2){
    margin-left: 18px;
    margin-right: 18px;
}
.comment{
    padding: 20px 0px;
    border-bottom: 1px solid #e5e9ef;
    padding-bottom: 14px;
    padding-top: 22px;
}
.username{
    color: #6d757a;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 3px;
}
.comment-content{
    padding: 2px 0px;
    font-size: 14px;
}
.comment-content >>> img{
    max-width: 70%;
}
.comment-time{
    height: 26px;
    color: #99a2aa;
    line-height: 26px;
    font-size: 12px;
}
.header-photo .block{
    margin-top: 22px;
    margin-left: 20px;
}
.one-comment{
    border-left: solid 1px #e5e9ef;
    border-right: solid 1px #e5e9ef;
    padding-right: 20px;
}
.forum-content{
    border-left: solid 1px #e5e9ef;
    border-right: solid 1px #e5e9ef;
    border-top: solid 1px #e5e9ef;
    padding-right: 10px;
    border-radius: 6px 6px 0px 0px;
}
.give-comment{
    border: solid 1px #e5e9ef;
    border-top: none;
    border-radius: 0px 0px 6px 6px;
    margin-bottom: 10px;
}
.sidebar{
    position: fixed;
    right: 47px;
    top: 95px;
    width: 22.5%;
}
.comment-dele{
    float: right;
    margin-top: -16px;
    font-size: 12px;
    margin-right: 10px;
    color: #99a2aa;
    cursor: pointer;
}
.dele-forum{
    margin-left: 420px;
    margin-top: 1px;
    cursor: pointer;
}
</style>